<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
html,body{
	margin:0;
	padding:0;
}
body{
	padding-top:100px;/*match height of fixed header*/
	margin-top:-100px;/*match height of fixed header*/
	padding-left:150px;/*match width of fixed sidebar*/
	margin-left:-150px;/*match width of fixed sidebar*/
}
#outer{
	margin-left:180px;/* match width (at least) of fixed sidebar (#left)*/
}
#inner{padding-top:100px;}/* matches height of fixed header to clear the content below it*/
#header{
	position:fixed;/* for good browsers*/
	top:0;
	left:0;
	width:100%;
	height:100px;/* the height you want the header to be*/
	z-index:999;
}
#headerinner{/* header content goes inside here*/
	text-align:center;
	background:green url(images/blogphoto.jpg) repeat-x right top;
	height:100px;/* match height of fixed header*/
	position:relative;
	z-index:999;
}
#left{
	width:150px;
	background:#ccc;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	position:fixed;/* for good browers */
	left:0;
	top:100px;
}
/* ie only styles below */
/* mac hide \*/
* html, * html body{
	overflow-y:hidden;
	height:100%;
}
* html #left {position:absolute;}
* html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #headerinner{margin-right:17px;}
* html #header{position:absolute;}
* html #outer {height:100%;overflow:auto}
/* end hide*/

</style>
<link href="css/table-filter.css" rel="stylesheet" type="text/css" />
<link href="css/login-layer.css" rel="stylesheet" type="text/css" media="screen">

<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery/jquery.jeditable.js" charset="utf-8"></script>
    
<script type="text/javascript" src="js/menu-controller.js"></script>
<script type="text/javascript" src="js/login-controller.js"></script>
<script type="text/javascript" src="js/filter-controller.js"></script>
<script type="text/javascript" src="js/club-detail-controller.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        //alert("====== main.jsp aaaaaaaaaaaaaaaaaeeeeeeeeeeeiiiiiiiiiiiiiiooooUUUUUUUUUU 11111");
        var menuController = new MenuController();
        //var clubDetailController = new ClubDetailController();

        //clubDetailController.mostrarMensajeAlerta();

        // use this to reset a single form
        //cuando se hace un click en el <a href llamado addNewClubAhref se ejecuta la funcion addNewClub
        $("a.addNewClubAhref").click(menuController.addNewClub);        
        $("a.advancedFilterAhref").click(menuController.advancedFilter);
        $("a.updateClubAhref").click(menuController.updateClub);

        $(".btn-slide").click(function(){
            $("#panelLoginLayerDiv").slideToggle("slow");
            $(this).toggleClass("active"); return false;
        });

        var loginController = new LoginController();

        //$("#contactForm").ajaxForm(loginController.validarSubmitLoginForm());
        //$(".button").click(loginController.validarSubmitLoginForm);
        $("#submit_btn_login_usr").click(loginController.validarSubmitLoginForm);

    });

    var lastDivIdActive = "#homeDiv";
    // prepara para dibujar el DIV contenedor de la accion
    // y oculta el ultimo DIV que estuvo visible
    function showNewDivHideLastDiv(newDivIdActive){
        alert("Se esta por ocultar el DIV "+lastDivIdActive);
        $(lastDivIdActive).hide('fast');
        lastDivIdActive = newDivIdActive;
        alert("Se esta por mostrar el DIV "+newDivIdActive);
        $(newDivIdActive).show('fast');

    }


</script>
</head>
<body>
    <div id="header">
        <div id="headerinner">
            <div class="slide"><a href="#" class="btn-slide">Login User</a><br/><br/><br/></div>
            <div class="slideWelcoUser" id="panelWelcoUserLayerDiv"> <p class="textoNickWelcoUser" id="panelWelcoUserP">welcome user</p></div>
            
            <div id="panelLoginLayerDiv">

                <div id="contact_form">
                    <form name="contactForm" action="">
                      <fieldset>
                          <label for="email" id="email_label">E-mail</label>
                          <input type="text" name="email" id="email" size="30" value="" class="text-input" />
                          <label class="error" for="email" id="email_error">This field is required.</label>

                          <label for="passwrd" id="passwrd_label">Password</label>
                          <input type="text" name="passwrd" id="passwrd" size="30" value="" class="text-input" />
                          <label class="error" for="passwrd" id="passwrd_error">This field is required.</label>

                          <br />
                        <input type="submit" name="submit" class="button" id="submit_btn_login_usr" value="Send" />
                      </fieldset>
                    </form>
                </div>
              </div>
            Header
        </div>
    </div>
    <div id="left">
        <p>
        <a href="home.html">home</a>
        </p>
        <p>
        <a href="findAllClubsAndList.html">FindAllClubs</a>
        </p>
        <p>
        </p>
        <p>
        <a href="#" class="addNewClubAhref">addNewClub</a>
        </p>
        <p>
        <a href="reserveField.html">ReserveField</a>
        </p>
        <p>
        <a href="reserveFieldFlow.html?_flowId=reservationField-flow">ReserveFieldFlow</a>
        </p>
        <p>
        <a href="#" class="advancedFilterAhref">advancedFilter</a>
        </p>
        <p>
        <a href="#" class="updateClubAhref">updateClub</a>
        </p>
    </div>
    <div id="outer">
        <div id="inner">
            <!-- se usa para agregar un nuevo Club -->
            <div id="formularioAltaClubDiv">este LUGAR es para formularioAltaClubDiv</div>
            
            <!-- se usa para hacer un filtro avanzado de clubes y canchas -->
            <div id="formularioAdvancedFilterDiv">este LUGAR es para formularioAdvancedFilterDiv</div>

            <!-- se usa para hacer un update del club -->
            <div id="formularioUpdateClubDiv">este LUGAR es para formularioUpdateClubDiv</div>

            <!-- se usa para mostrar el detalle de  un club -->
            <div id="formularioClubDetalleDiv">este LUGAR es para formularioClubDetalleDiv</div>


            <div id="homeDiv">
                <h1>Fixed header and sidebar: </h1>
                <h2>Experimental layout - Use at your own risk</h2>
                <p>Note that the left fixed sidebar will become unusable if it extends below the fold so keep content to a minimum.</p>
                <p>Tested in IE5, IE5.5,IE6, NN6.2, Mozilla1.3, Firefox 1.0 and Opera.7.5. </p>
                <p>Also works in IE5.1 mac and NN7 mac</p>
                <p>These are the styles for ie pc only and are hidden using the mac hiding hack coupled with * html.</p>
                <p> /* mac hide \*/<br>
                    * html, * html body{<br>
                    overflow:hidden;<br>
                    height:100%;<br>
                    }<br>
                    * html #left {position:absolute;}<br>
                    * html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }<br>
                    * html #headerinner{margin-right:-17px;}<br>
                    * html #header{position:absolute;}<br>
                    * html #outer {height:100%;overflow:auto}<br>
                    /* end hide*/ </p>
                <p>The
        only bit in the ie styles that will need altering if you change sizes
        of the fixed elements is in this section below. This gives ie5 a
        different size only by using the voice family hack to jump the next
        style</p>
                <p> * html #headerinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; } /* ie5 gets this*/<br>
                    * html #headerinner{margin-right:-17px;}/* ie5.5 and ie6 get this*/<br>
                </p>
                <p>This
        gives ie5 a different size only by using the voice familyhack to jump
        the next style. This just makes the header stretch in ie5 all the way
        across the screen (ie 5.5. and ie6 are ok anyway). It will need to be
        changed according to the width of the left sidebar. The
        margin-right:17px is for ie5.5, and ie6 is to avoid covering the right
        scrollbar.</p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
                <p>Some content to scroll </p>
            </div>
        </div>
    </div>
</body></html>

<!-- ************************************************ -->
<!-- pageName: main.jsp                               -->
<!-- ************************************************ -->
